<script lang="ts" setup>
    interface Props {
        text: string
        isSwitch: boolean
    }

    const props = defineProps<Props>()
</script>

<template>
  <div>
    <span v-if="isSwitch" class="confirm btn">{{ text }}</span>
    <span v-else class="cancel btn">{{ text }}</span>
  </div>
</template>

<style scoped>
    .btn {
        display: inline-block;
        text-align: center;
        height: 29px;
        line-height: 29px;
        border-radius: 19.5px;
    }
    .confirm {
        width: 64px;
        color: #fff;
        background-color: #FC6627;
    }
    .cancel {
        width: 72px;
        color: #A5A6AB;
        background-color: #F7F8FA;
    }
</style>